// 这里使用更简洁的modx来进行替代redux的工作,同时需要mobx-react-lite,这两个需要下载
// 在使用这两个方法之前 我们需要知道他们是用来干什么的
// modx基于redux,可以进行更简洁/更合乎逻辑的处理响应式的数据 让我们可以使用更少量的代码做更多的事情
import { makeAutoObservable , autorun } from 'mobx';

// 1.构建数据类
class CollapseStore {
    // 2.声明数据类
    collapsed = localStorage.getItem('collapsed') == 'true' ? true : false
    // 3.将数据设置为响应式
    constructor(){
        makeAutoObservable(this)
    }
    // 4.设置修改数据的方法
    change(){
        this.collapsed = !this.collapsed
    }
}
// 5.导出store实例
const collapsedStore = new CollapseStore();

autorun(()=>{
    localStorage.setItem('collapsed' , collapsedStore.collapsed)
})

export default collapsedStore